var boxtt=document.querySelector('[data-coont]')
let box=document.querySelector('.box')
var bx=document.querySelector('.bx-top')
var name1=getCookie('name')
//内容在下面获取
var lists
//判断当前账号是否存在
if(name1){
    show1()
//获取账号
}else{
    alert("你还未登录")
    //获取地址栏信息
    var url=location.href
    
    //跳转到登录页
    location='./den.html?iul='+url
}
function show1(){
    
        //获取当前账号存储的数据
         lists=localStorage.getItem(name1)||"[]"
        //把字符串转为数组对象
        lists=eval('('+lists+')')

        //判断当前账号是否还有数据
     if(lists.length>0){
        var bool=lists.every(item=>{
            return item.is_select==1
        })
            //创建字符串，拼接所有内容
           //重新渲染 每次加减一个函数
           var str=
           `<ul class="header">
           <li>
               <input type="checkbox" name="quan" ${bool?"checked":""}>全选
           </li>
           <li>商品图片</li>
           <li>数量</li>
           <li>单价</li>
           <li>商品名称</li>
           <li>小计</li>
           <li>操作</li>
       </ul>`
            //遍历数组
            lists.forEach(item=>{
                str+=` 
                <div class="content">
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan" ${item.is_select==1?"checked":''}  data-id="${item.id}">
                        </li>
                        <li>
                            <img src="${item.src}" alt="">
                        </li>
                        <li>
                            <button ${item.number<=1?"disabled":''} data-id="${item.id}">-</button>
                            <button>${item.number}</button>
                            <button data-id="${item.id}">+</button>
                        </li>
                        <li><span> ￥${item.price}</span></li>
                        <li>item${item.name}</li>
                        <li><span class='xiaoji'><span>${item.number*item.price
                        }</span></li>
                        <li><button data-id="${item.id}">删除</button></li>
                    </ul>`
            })
    
            str+=
             `
             <button class="zdbs">清空购物车</button>
            <div class="footer">
            <p>已加入的商品 : ${lists.length} 件</P>
            总计金额（不含运费）：￥<span>${total2()[1]}</span>
              
            </div>
            <button class="dx"><a href="./01.html">去结算</a></button>
        `
            //把拼接好的内容渲染到页面中
            box.innerHTML=str
        }else{
            //创建字符串，拼接所有内容
            var str=`
            <div class="jumbotron">
                <h1>您的购物车空空如也</h1>
                <p>点击下方按钮快去选购吧! ^_^</p>
                <p><a class="btn btn-primary btn-lg" href="./leb.html" role="button">赶紧去逛逛吧</a></p>
            </div>
            `
            //把拼接好的内容渲染到大盒子中
            box.innerHTML=str
        }       
}

//給大盒子对象绑定点击事件
box.onclick=function(e){
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg=e.target || e.srcElement
    //判断当前点击的是否为加法按钮
    if(tg.innerHTML=="+"){
        //获取当前按钮的id属性
        var id=tg.getAttribute('data-id')
       
        //遍历数组中所有元素
        lists.forEach(item=>{
            //判断当前遍历的元素id是否等于按钮所对应的id
            if(item.id==id){
                item.number++
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //减法
    if(tg.innerHTML=='-'){
        //获取当前按钮的id
        var id=tg.getAttribute('data-id')
        //遍历数组元素
        lists.forEach(item=>{
            //判断当前元素中的id是否等于按钮的id
            if(item.id==id){
                item.number--
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //删除
    if(tg.innerHTML=="删除"){
        //获取当前按钮的id
        var id=tg.getAttribute('data-id')
        //过滤数组元素的id等于当前按钮id
        lists=lists.filter(item=>{
            return item.id!=id
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //全选
    if(tg.name=="quan"){
        
        //遍历数组中所有商品
        lists.forEach(item=>{
            //判断全选框是否被选中
            if(tg.checked){
                //让商品中的is_select字段为1
                item.is_select=1
            }else{
                item.is_select=0
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //选中框
    if(tg.name=="xuan"){
       
        //获取当前选中框的id
        var id=tg.getAttribute("data-id")
        //遍历数组元素
        lists.forEach(item=>{
            //判断当前元素的id是否等于选中框的id
            if(item.id==id){
                //判断当前选中框是否被选中
                if(tg.checked){
                    item.is_select=1
                }else{
                    item.is_select=0
                }
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1,JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //结算
    if(tg.innerHTML=="去结算"){
        //给定确认框
        if(confirm("你确定要购买吗？")){
            alert("已支付："+total2()[1])
            //删除已购买的商品
            lists=lists.filter(item=>{
                return item.is_select!=1
            })
            //把操作结果重新存放在localStorage中
            localStorage.setItem(name1,JSON.stringify(lists))
            //重新调用显示数据的函数
            show1()
        }
    }
    //清空购物车
     if(tg.innerHTML=="清空购物车"){
         lists=[]
        //把操作结果重新存放在localStorage中
         localStorage.setItem(name1,JSON.stringify(lists))
         //重新调用显示数据的函数
         show1()
     }

}

//所选商品数量和价格
function total2(){
    var num1=0 // 所选商品数量
    var num2=0 //所选商品价格
    //遍历数组元素
      let ar1 = lists.map(res => {
                res.price = res.price.replace('￥', '')
                return res
            })
    lists.forEach(item=>{
        //判断当前商品是否被选中
        if(item.is_select==1){
            //累积所有商品数量
            num1+=item.number
            //累积所有选中商品的小计
            num2+=item.number*item.price      
        }  
    })
    return [num1,num2.toFixed(2)]
}